<template>
  <view class="minepage">
    <view class="top-bg">
      <view class="user-card">
        <view class="user-row">
          <image
            v-if="formData.avatar"
            :src="formData.avatar"
            class="avatar"></image>
          <image
            v-else
            src="../../static/index/actove.png"
            class="avatar"></image>
          <view class="nickname">{{ formData.username || "BY租房" }}</view>
        </view>
        <view style="position: relative">
          <view class="score-card">
            <view class="score-label">用户积分</view>
            <view class="score-value">{{ formData.score || 0 }}</view>
            <image class="score-decor" src="../../static/index/sc.png" />
          </view>
          <view class="func-list">
            <view class="func-item" @click="showMpQrcode(1)">
              <image
                src="../../static/index/tell.png"
                style="width: 36rpx; height: 36rpx"></image>
              <text>联系我们</text>
              <u-icon name="arrow-right" size="18" color="#333" />
            </view>
            <view class="divider"></view>
            <view class="func-item" @click="switchAccount">
              <image
                src="../../static/index/shezhi.png"
                style="width: 36rpx; height: 36rpx"></image>
              <text>切换账号</text>
              <u-icon name="arrow-right" size="18" color="#333" />
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="mp-card">
      <view class="mp-info">
        <view class="mp-title">关注公众号</view>
        <view class="mp-desc">随时扫码，获取更多信息</view>
        <button class="mp-btn" @click="showMpQrcode(2)">立即关注</button>
      </view>
      <image class="mp-img" src="../../static/index/mp.png" />
    </view>

    <u-popup :show="showQrcode" @close="showQrcode = false">
      <view class="qrcode-popup">
        <image :src="gzhImg" class="qrcode-img" show-menu-by-longpress />
        <view class="qrcode-tip">长按保存二维码</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import { setName, getMsg, getqrcodeImg } from "@/api/mainapi.js";
export default {
  data() {
    return {
      formData: {
        username: "",
        avatar: "",
        score: 0,
      },
      gzhImg: "",
      showQrcode: false,
    };
  },
  computed: mapGetters(["isLogin", "uid", "userInfo"]),
  onShow() {
    if (uni.getStorageSync("userInfo")) {
      this.getMsg();
    } else {
      uni.navigateTo({
        url: "/pages/login/login",
      });
    }
  },
  methods: {
    getUserProfile(e) {
      return new Promise((resolve, reject) => {
        uni.uploadFile({
          url: this.$Config.HTTP_REQUEST_URL + "/api/common/ossUpload",
          filePath: e.detail.avatarUrl,
          name: "file",
          formData: {
            file: e.detail.avatarUrl,
          },
          header: {
            token: uni.getStorageSync("userInfo").token,
          },
          success: (res) => {
            if (res.statusCode === 200) {
              this.formData.avatar = JSON.parse(res.data).code.fullurl;
              this.setName();
            }
          },
        });
      });
    },
    handleChange(e) {
      this.formData.username = e.detail.value.trim();
      this.setName();
    },
    async getMsg() {
      const res = await getMsg();
      if (res.response.statusCode === 200) {
        this.formData.username = res.data.data.nickname;
        this.formData.avatar = res.data.data.avatar;
        this.formData.score = res.data.data.score || 0;
      }
    },
    async setName() {
      const res = await setName({
        avatar: this.formData.avatar,
        nickname: this.formData.username,
        token: uni.getStorageSync("userInfo").token,
      });
      if (res.response.statusCode === 200) {
      }
    },
    contactUs() {
      // uni.makePhoneCall({
      //   phoneNumber: "400-000-0000",
      // });
    },
    switchAccount() {
      uni.removeStorageSync("userInfo");
      this.formData.username = "";
      this.formData.avatar = "";
      this.formData.score = 0;
      uni.navigateTo({
        url: "/pages/login/login",
      });
    },
    async showMpQrcode(v) {
      const res = await getqrcodeImg({
        token: uni.getStorageSync("userInfo").token,
      });
      if (v == 1) {
        this.gzhImg = res.data.data.kefu;
      } else {
        this.gzhImg = res.data.data.gzh;
      }

      this.showQrcode = true;
      console.log(res.data.data.gzh);
    },
  },
};
</script>

<style scoped lang="scss">
.minepage {
  min-height: 100vh;
  background: #f7f9fa;
  background: linear-gradient(180deg, #eaf6ff 0%, #fff 100%);
  // padding-bottom: 40rpx;
}
.top-bg {
  width: 100%;
  // height: 340rpx;
  // background: linear-gradient(180deg, #eaf6ff 0%, #4a90e2 100%);
  // border-bottom-left-radius: 40rpx;
  // border-bottom-right-radius: 40rpx;
  position: relative;
  z-index: 1;
}
.user-card {
  padding-top: 80px;
}
.user-row {
  display: flex;
  align-items: center;
  padding: 20px;
}
.avatar {
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  border: 4rpx solid #fff;
  box-shadow: 0 4rpx 16rpx rgba(74, 144, 226, 0.15);
  margin-right: 20rpx;
}
.nickname {
  font-size: 32rpx;
  font-weight: bold;
  color: #222;
}
.score-card {
  position: relative;
  width: 90%;
  margin-left: 5%;
  height: 218rpx;
  background: linear-gradient(142deg, #0ca8fd 0%, #4272fa 100%);
  box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(18, 161, 252, 0.5);
  border-radius: 40rpx 40rpx 0rpx 0rpx;
  margin-top: 20rpx;
  padding: 30px 32px;
  box-sizing: border-box;
  .score-label {
    color: #fff;
    font-weight: 400;
    font-size: 24rpx;
    margin-bottom: 10rpx;
  }
  .score-value {
    color: #fff;
    font-weight: 600;
    font-size: 48rpx;
    margin-left: 0;
    margin-right: 30rpx;
  }
  .score-decor {
    width: 252rpx;
    height: 252rpx;
    position: absolute;
    right: 20rpx;
    top: 20rpx;
    opacity: 0.3;
  }
}
.score-triangle {
  width: 0;
  height: 0;
  border-left: 30rpx solid transparent;
  border-right: 30rpx solid transparent;
  border-top: 20rpx solid #fff;
  margin: 0 auto;
  position: relative;
  top: -10rpx;
  z-index: 2;
}
.func-list {
  width: 100%;
  position: absolute;
  top: 98px;
  background: url("../../static/index/juxing.png") no-repeat;
  background-size: 100% 152rpx;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(74, 144, 226, 0.08);
  .func-item {
    display: flex;
    align-items: center;
    padding: 32rpx 54rpx;
    font-size: 30rpx;
    color: #333;
    u-icon {
      margin-right: 20rpx;
    }
    text {
      flex: 1;
      margin-left: 10rpx;
    }
  }
  .divider {
    height: 1rpx;
    background: #f1f1f1;
    margin: 0 24rpx;
  }
}
.mp-card {
  margin: 240rpx auto 0;
  width: 90%;
  margin-left: 5%;
  height: 220rpx;
  background: linear-gradient(180deg, #d4edff 0%, #ffffff 100%);
  border-radius: 32rpx;
  border: 2rpx solid;
  border-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 1),
      rgba(255, 255, 255, 0)
    )
    2 2;
  padding: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(74, 144, 226, 0.06);
  box-sizing: border-box;
  display: flex;
  .mp-info {
    flex: 1;
    .mp-title {
      font-weight: 600;
      font-size: 32rpx;
      color: #000148;
    }
    .mp-desc {
      font-weight: 400;
      font-size: 22rpx;
      color: #606060;
      margin: 10rpx 0 20rpx 0;
    }
    .mp-btn {
      width: 164rpx;
      height: 60rpx;
      background: #247fff;
      color: #fff;
      border-radius: 40rpx;
      font-size: 26rpx;
      border: none;
      text-align: center;
      line-height: 60rpx;
      box-shadow: 0 2rpx 8rpx rgba(36, 127, 255, 0.15);
      margin-left: 0;
    }
  }
  .mp-img {
    width: 160rpx;
    height: 160rpx;
    margin-left: 20rpx;
  }
}
.qrcode-popup {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 20rpx;
  .qrcode-img {
    width: 300rpx;
    height: 300rpx;
    border-radius: 24rpx;
  }
  .qrcode-tip {
    margin-top: 20rpx;
    color: #666;
    font-size: 26rpx;
  }
}
</style>
